<template>
  <div>
    <h2>App</h2>
    <h3>当前的数据是第{{ page }}页</h3>
    <h3>目前每页展示{{ limit }}条</h3>
    <!-- 
    <Page
      :page="page"
      :limit="limit"
      @update:page="page = $event"
      @update:limit="limit = $event"
    /> -->

    <!-- 可以直接使用.sync修饰符完成父子组件通信并数据绑定 -->
    <Page :page.sync="page" :limit.sync="limit"></Page>
  </div>
</template>

<script>
  import Page from "@/components/Page";
  export default {
    name: "App",
    data() {
      return {
        page: 1,
        limit: 30,
      };
    },
    components: {
      Page,
    },
    watch: {
      page() {
        console.log(`重新请求新的数据 新的页码是${this.page}`);
      },
    },
  };
</script>

<style></style>
